import React, { PureComponent } from 'react';
import { connect } from "react-redux";
import { withRouter } from 'react-router-dom';
import { DetailWrapper, Header, Content } from "./style";
import { actionCreators } from './store';

class Detail extends PureComponent{
    render() {
        return (
            <DetailWrapper>
                <Header>{this.props.title}</Header>
                <Content
                    dangerouslySetInnerHTML={{__html: this.props.content}}
                />
            </DetailWrapper>
        );
    }

    componentDidMount() {
        this.props.getDetail(this.props.match.params.id);
    }
}

const mapState = (state) => ({
   title: state.getIn(['detail','title']),
   content: state.getIn(['detail','content'])
});

const mapDispatch = (dispatch) => ({
   getDetail(id) {
       dispatch(actionCreators.getDetail(id));
   }
});

export default connect(mapState,mapDispatch)(withRouter(Detail));